<template>
	<view>
		<view class="auth">
			<view class="wanl-title">欢迎注册账号</view>
			<form @submit="formSubmit">
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input placeholder="请输入手机号" type="number" maxlength="11" confirm-type="next" placeholder-class="placeholder" name="mobile" v-model="mobile" @input="onKeyInput"></input>
				</view>
				<view class="auth-button flex flex-direction">
					<button class="cu-btn bg-orange sl radius-bock" formType="submit" :disabled="getSubmitDisabled">获取验证码</button>
				</view>
				<!-- 同意服务条款 -->
				<checkbox-group class="auth-clause" @change="CheckboxChange">
					<checkbox class="orange" :class="checked ? 'checked' : ''" :checked="checked ? true : false" value="agree" />
					<view>
						我已阅读<text @tap="onDetails($store.state.common.appConfig.user_agreement, '用户协议',checked_01)">用户协议</text>及<text @tap="onDetails($store.state.common.appConfig.privacy_protection, '隐私保护',checked_02)">隐私权保护声明</text>
					</view>
				</checkbox-group>
			</form>
		</view>
		<view class="auth-foot">
			<view class="menu text-grey">
				<text @tap="auth">登录</text>
				<text @tap="help">帮助</text>
			</view>
		</view>
		<wanl-agree ref="wanl_agree" @agree="onAgree"></wanl-agree>
	</view>
</template>
<script>
	import graceChecker from '@/common/graceChecker'; //来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	export default {
		data() {
			return {
				submitDisabled: true,
				title: '表单验证',
				pageroute: '',
				mobile: '',

				checked_01: false,
				checked_02: false,
			};
		},
		onLoad(options) {
			this.pageroute = options.url;
			if (options.mobile) {
				this.mobile = options.mobile;
				this.submitDisabled = false;
			}
		},

		computed: {
			checked: function() {
				if (this.checked_01 && this.checked_02) {
					uni.setStorageSync('auth_agree',1)
					return true
				}
				return false
			},
			getSubmitDisabled: function() {
				if (!this.mobile) return true
				if (!this.checked) return true
				return false
			}
		},
		mounted() {
			setTimeout(() => {
				const auth_agree = uni.getStorageSync('auth_agree') || 0;
				if (!auth_agree) {
					if (this.$store.state.common.appConfig.user_agreement) {
						this.onDetails(this.$store.state.common.appConfig.user_agreement, '用户协议', this.checked_01)
					} else {
						setTimeout(() => {
							this.onDetails(this.$store.state.common.appConfig.user_agreement, '用户协议', this.checked_01)
						}, 2000)
					}
				}

			}, 1000)
		},
		methods: {
			CheckboxChange(e) {
				if (e.detail.value.length) {
					this.checked_01 = true
					this.checked_02 = true
				} else {
					this.checked_01 = false
					this.checked_02 = false
				}
			},
			onKeyInput: function(e) {
				this.submitDisabled = false
			},
			formSubmit: function(e) {
				if (!this.checked) {
					this.$wanlshop.msg('请先同意用户协议和隐私保护声明');
					return
				}
				//定义表单规则
				var rule = [
					{ name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' }
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					uni.request({
						url: '/wanlshop/validate/check_mobile_available',
						data: {
							mobile: this.mobile
						},
						// 1.1.8 升级
						complete: res => {
							if (res.res.code == 1) {
								this.$wanlshop.to(`validcode?event=register&mobile=${e.detail.value.mobile}&url=${this.pageroute}`, 'slide-in-bottom', 200);
							} else {
								uni.showModal({
									title: '手机号已被注册',
									content: '点击确定使用手机号登录',
									success: (msg) => {
										if (msg.confirm) {
											this.$wanlshop.to(`phone?mobile=${e.detail.value.mobile}&url=${this.pageroute}`, 'slide-in-bottom', 200);
										} else if (msg.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							}
						}
					});
				} else {
					this.$wanlshop.msg(graceChecker.error);
				}
			},
			auth() {
				this.$wanlshop.to(`auth?url=${this.pageroute}`);
			},
			help() {
				this.$wanlshop.to(`/pages/user/help?url=${this.pageroute}`);
			},
			onDetails(id, title, checked) {
				this.$refs.wanl_agree.show(id, title, checked)

			},
			onAgree(id) {
				if (id == this.$store.state.common.appConfig.user_agreement) {
					this.checked_01 = true
					if (!this.checked_02) {
						console.log(this.$store.state.common.appConfig.privacy_protection);
						this.onDetails(this.$store.state.common.appConfig.privacy_protection, '隐私保护', this.checked_02)
					}
				}
				if (id == this.$store.state.common.appConfig.privacy_protection) {
					this.checked_02 = true
				}
			}
		}
	};
</script>

<style>
	@import url("auth.css");
</style>